<template>
  <view>
    <text
      :style="{
        display: 'inline-block',
        width: '40rpx',
        height: '40rpx',
        textAlign: 'center',
        lineHeight: '38rpx',
        marginRight: '28rpx',
        color: btnColor,
        borderRadius: borderRadius,
        border: '1px solid #e2e2e2'
      }"
      @click="minus"
      >-</text
    >
    <text :style="{color: numColor}">
      {{ num }}
    </text>
    <text
      :style="{
        display: 'inline-block',
        width: '40rpx',
        height: '40rpx',
        textAlign: 'center',
        lineHeight: '40rpx',
        marginLeft: '28rpx',
        color: btnColor,
        borderRadius: borderRadius,
        border: '1px solid #e2e2e2'
      }"
      @click="add"
      >+</text
    >
  </view>
</template>
<script>
  export default {
    props: {
      numColor: {
        type: String,
        default: '#323233'
      },
      btnColor: {
        type: String,
        default: '#323233'
      },
      btnType: {
        type: String,
        default: 'square'
      },
      val: {
        type: Number,
        required: 'required'
      },
      min: {
        type: Number,
        default: 1
      }
    },
    computed: {
      borderRadius() {
        return this.btnType === 'square' ? '8rpx' : this.btnType === 'circle' ? '40rpx' : '0'
      }
    },
    data() {
      return {
        num: this.val
      }
    },
    methods: {
      add() {
        this.num++
        this.$emit('change', this.num)
      },
      minus() {
        if (this.num === 1) return
        this.num--
        this.$emit('change', this.num)
      }
    }
  }
</script>
